<script setup>
import { computed } from "vue";
import { useRouter } from "vue-router";
import useSearchProjecValue from "../hooks/useSearchProjecValue";
const {statusOption,typeOption} = useSearchProjecValue()
import Card from "./Card.vue"
const props = defineProps({
    data:Object
})
const router = useRouter()
const link = ()=>{
    router.push("/project/detail/"+props.data.pid)
}
const getStatusText = computed(()=>statusOption.find(x=>x.value==props.data.status).text)
const getTypeText = computed((()=>typeOption.find(x=>x.value==props.data.type).text))
</script>

<template>
    <div class="card-container" @click="link">
        <Card :padding="15" class="card">
            <div class="cell-1">
                <div class="title">{{data.name}}</div>
                <div class="member">{{data.member}}人</div>
            </div>
            <div class="cell-2">
                <van-tag v-for="item,index in data.tags.split(' ')" color="var(--light-color)">{{item}}</van-tag>
            </div>
            <div class="cell-3 van-multi-ellipsis--l3">
                {{data.introduce}}
            </div>
            <div class="cell-4">
                <div class="left">
                    <van-tag class="status" size="medium" plain color="var(--second-color)">{{getStatusText}}</van-tag>
                    <van-tag class="type" size="medium" plain color="var(--main-color)">{{getTypeText}}</van-tag>
                </div>
                <div class="school">    
				    {{data.school}}
                </div>
            </div>
        </Card>
    </div>
</template>

<style scoped>
.card-container{
    margin-bottom: 10px;
    user-select: none;
    cursor: pointer;
    transition: all 0.5s;
}
.card{
    transition: all 0.2s;
}
.card:hover{
    box-shadow: 0px 0px 10px -5px rgba(0, 0, 0, .1);;
    transform: scale(1.03);
}
.cell-1{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.title{
    font-weight:600;
    background-color: var(--main-color);
    padding: 0px 10px;
    border-radius: 4px;
    color: white;
}
.member{
    font-size: 10px;
}
.cell-2{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}
.van-tag{
    margin: 5px 0px ;
    margin-right: 5px;
}
.cell-3{
    margin-top: 5px;
    font-size: 13px;
    color: var(--font-gray-color);
}
.cell-4{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 5px;
}
.left{
    display: flex;
}
.school {

	font-size: 10px;
}

</style>